<template>

  <div class="goodsArr w-1200">
    <div class="goodsArr-list" v-for="(item, index) in allTypeList" :key="index">
      <div class="head-box">
        <div class="title-box">
          <div class="line"></div>
          <span class="title">{{ item.typeName }}</span>
        </div>
        <div @click="jumpProductList(item)" style="cursor: pointer;">
          <span class="more-tips">更多产品</span> <img src="@/static/easydrug/homePage/more_icon.png" class="right-arrow" />
        </div>
      </div>
      <div class="content">
        <div class="left-box">
          <img class="left-img" :src="item.img" />
          <div class="label-list" :style="{ background: `${item.backgroundColor}` }">
            <template v-for="(label, labelIndex) in item.children">
              <div class="label-item"  :key="labelIndex" v-if="labelIndex < 6"  @click="jumpProductList(item)">
                {{ label.typeName }}
              </div>
          </template>
          </div>
        </div>
        <div class="goods-list">
          <div v-for="(subItem, subIndex) in item.goodsList" :key="subIndex" class="goods-item"  @click="jumpDetail(subItem)">
           
            <div class="brug-img"> <img :src="subItem.goodsCover" /></div>

            <div class="info">
              <div class="name">{{ subItem.goodsName }}</div>
              <div class="tablet-box">
                <div class="tablet">{{ subItem.specifications }}</div>
                <div class="soldCount">已售{{ subItem.salesVolume }}件</div>
              </div>
              <div class="price-box">
                <div class="price"><span class="price-unit">￥</span>{{ subItem.goodsPrices }}</div>
                <div class="retailPrice">建议零售价:￥{{ subItem.retailPrice }}</div>
              </div>
              <div class="companyName">{{ subItem.manufacturer }}</div>
              <div class="effectiveDate">效期优于:{{ subItem.validTo }}</div>
              <div class="btns" @click.stop="()=>{}">
                <el-input-number class="input-number" :min="1" v-model="subItem.num" @change="handleChange"></el-input-number>
                <el-button class="btn"  @click.stop="do_add_cart(subItem)">加入购物车</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <product_add_cart_success_modal ref="product_add_cart_success_modal" />

  </div>
</template>
<script>

import product_add_cart_success_modal from "@/components/product/product_add_cart_success_modal.vue";

export default {
  name: "goodsListDisplay",
  components: {
    product_add_cart_success_modal
  },
  props: [],
  data() {
    return {
      allTypeList:[],
      goodsArrList: []
    };
  },
  computed: {

  },
  watch: {},

  created() {
    this.initData();
    this.getDataList();
  },

  methods: {
    //购车添加商品
    do_add_cart(item) {
      if (!this.mix_get_login_status()) {
        return;
      }

      // if (item.num > item.inventory) {
      //   alertErr("当前商品库存不足！");
      //   return;
      // }



      this.$httpApi('/api/v1/purchaser/addGoods/toCart',{
        goodsId: item.goodsId,
        goodsNums: item.num,
      }, 'post').then(res=>{
        this.$refs.product_add_cart_success_modal.init({
            num: item.num,
            ...item,
          });
      })
    },
    jumpDetail(item){
      this.$router.push({
        path:'/product-detail',
        query:{
          id:item.goodsId
        }
      })
    },
    jumpProductList(item){
      this.$router.push({
        path: '/newAllProduct',
        query:{
          id: item.typeId
        }
      })
    },
    getDataList(){
      this.$httpApi("/api/v1/index/medicine/type", {
        },
         "get"
      ).then(res => {
        res.data.forEach(item => {
          item.goodsList = [];
          item.backgroundColor = '#01A08C';
          this.$httpApi("/api/v1/index/type/goods/list", {
              typeId: item.typeId,
              pageNum:1,
              pageSize:8
            },
             "get"
          ).then(pres=>{
            pres.data.map(n=>{
              n.num = 1;
            })
            item.goodsList = pres.data;
          })
        })
        this.allTypeList = res.data;
        console.log(this.allTypeList)
      })
    },
    initData() {
      let labelList1 = ['感冒类', '呼吸系统', '胃肠道类', '清热类', '胃肠道类', '儿科类']
      let labelList2 = ['妇婴纸品', '家居环境', '家用纸品', '日用杂货', '洗护用品', '其他用品']
      this.goodsArrList = [
        this.getDemoName('中西成药', '#01A08C', labelList1),
        this.getDemoName('生活用品', '#5296DA', labelList2),
      ]
      console.log("this.goodsArrList=", this.goodsArrList)
    },

    getDemoName(name, backgroundColor, labelList) {
      let tempArr = []
      for (let j = 0; j < 8; j++) {

        tempArr.push({
          img: require('@/static/easydrug/homePage/common.png'),
          name: '感力清磷酸奥司他韦胶囊',
          tablet: '0.8G*64片(盒)',
          soldCount: 800,
          price: 39.50,
          retailPrice: 49.80,
          companyName: '这里显示生产厂家名称',
          effectiveDate: '2026-02-28',
          num: 10,
          groupBuyingCount: 543
        })
      }

      return {
        backgroundColor: backgroundColor,
        labelList: labelList,
        img: require('@/static/easydrug/homePage/common.png'),
        title: name,
        goodsList: tempArr
      }


    },
    handleChange(value) {
      console.log(value);
    }
  },
};
</script>
<style scoped lang="less">
.goodsArr {
  height: auto;
  display: flex;
  max-width: @width;
  flex-direction: column;

  .goodsArr-list {
    width: 100%;
    margin-top: 36px;

    .head-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      

      .title-box {
        display: flex;
        align-items: center;
        .line {
          width: 6px;
          height: 20px;
          background: #EF1F1F;
          border-radius: 100px 100px 100px 100px;
        }

        .title {
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 22px;
          color: #333333;
          vertical-align: middle;
          margin-left: 10px;
        }
      }

      .more-tips {
        font-family: MicrosoftYaHei, MicrosoftYaHei;
        font-weight: normal;
        font-size: 14px;
        color: #333333;
        vertical-align: middle;
      }

      .right-arrow {
        width: 16px;
        height: 16px;
        margin-left: 3px;
        vertical-align: middle;
      }
    }

    .content {
      display: flex;
      align-items: flex-start;
      margin-top: 16px;

      .left-box {
        width: 240px;
        max-height: 736px;
        display: flex;
        flex-direction: column;
        background-color: #fff;

        .left-img {
          width: 240px;
          height: 560px;


        }

        .label-list {
          padding: 14px 16px 24px 16px;
          display: flex;
          flex-wrap: wrap;

          .label-item {
            margin-top: 10px;
            margin-right: 12px;
            width: 98px;
            height: 36px;
            line-height: 36px;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #FFFFFF;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
            text-align: center;
            cursor: pointer;

            &:nth-child(2n) {
              margin-right: 0px !important;
            }
          }
        }
      }


      .goods-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #E5E5E5;

        .goods-item {
          border-top: 1px solid #E5E5E5;
          border-right: 1px solid #E5E5E5;
          display: flex;
          width: 240px;
          flex-direction: column;
          background: #fff;
          position: relative;
          cursor: pointer;

          .brug-img {
            margin-top: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;

            img {
              width: 170px;
              height: 170px;

            }
          }



          .info {
            padding: 4px 15px 12px 20px;

            .name {
              font-family: PingFang SC, PingFang SC;
              font-weight: 600;
              font-size: 16px;
              color: #333333;
            }

            .tablet-box {
              width: 100%;
              display: flex;
              justify-content: space-between;
              margin-top: 7px;
              align-items: center;

              .tablet {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #EF1F1F;
                background: #FFF1F0;
                border-radius: 3px 3px 3px 3px;
                padding: 2px 8px;
              }

              .soldCount {
                font-family: Arial, Arial;
                font-weight: 400;
                font-size: 13px;
                color: #ABABAB;
                line-height: 22px;
                text-align: left;
              }
            }

            .price-box {
              margin-top: 7px;
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .price-unit {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 14px;
                color: #EF1F1F;
              }

              .price {
                font-family: DIN Alternate, DIN Alternate;
                font-weight: bold;
                font-size: 22px;
                color: #EF1F1F;
              }

              .retailPrice {
                font-family: Arial, Arial;
                font-weight: 400;
                font-size: 12px;
                color: #666666;
              }
            }

            .companyName {
              margin-top: 4px;
              font-family: Arial, Arial;
              font-weight: 400;
              font-size: 14px;
              color: #999999;
            }

            .effectiveDate {
              margin-top: 4px;
              font-family: Arial, Arial;
              font-weight: 400;
              font-size: 14px;
              color: #999999;
            }

            .btns {
              margin-top: 8px;
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;

              .input-number {
                width: 104px !important;
                height: 30px !important;
                line-height: 28px !important;

                /deep/ .el-input__inner {
                  height: 30px !important;
                  line-height: 30px !important;
                  padding-left: 10px !important;
                  padding-right: 10px !important;
                }

                /deep/ .el-input-number__decrease {
                  width: 30px !important;
                }

                /deep/ .el-input-number__increase {
                  width: 30px !important;
                }
              }

              .btn {
                height: 30px !important;
                padding: 3px 10px !important;
                background: #EF1F1F;
                border-radius: 4px 4px 4px 4px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #FFFFFF;
              }
            }
          }


          &:nth-child(5n) {
            margin-right: 0px !important;
          }
        }
      }
    }
  }
}
</style>
